{% load i18n cms_tags sass_tags sekizai_tags %}

{% addtoblock "css" %}<link href="{% sass_src 'shop/css/list-items.scss' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}

<div class="shop-cart">
{% block shop-cart-head %}
	{% if cart.num_items == 0 %}
	<div class="row">
		<div class="col">
			<p class="lead text-muted">{% trans "There are no items in the cart." context "cart" %}</p>
		</div>
	</div>
	{% endif %}
{% endblock shop-cart-head %}

{% block shop-cart-body %}
	{% for cart_item in cart.items %}
	<div class="shop-list-item row border-top py-2">
		<div class="col-12 col-md-6">
			<div class="row align-items-center flex-nowrap">
				<div class="col-2 text-right">
					{{ cart_item.quantity }}<span class="px-1">&times;</span>
				</div>
				<div class="col-10">{{ cart_item.summary.media }}</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<div class="row text-nowrap flex-nowrap lead">
				<div class="col-6 text-right">{{ cart_item.unit_price }}</div>
				<div class="col-4 col-md-6 text-right">{{ cart_item.line_total }}</div>
			</div>
		{% for extra_row in cart_item.extra_rows %}
			<div class="row text-muted text-nowrap flex-nowrap">
				<div class="col-6 text-right">{{ extra_row.label }}</div>
				<div class="col-4 col-md-6 text-right">{{ extra_row.amount }}</div>
			</div>
		{% endfor %}
		</div>
	</div>
	{% endfor %}
{% endblock shop-cart-body %}

{% block shop-cart-foot %}
	<div class="row">
		<div class="col-12 col-sm-6">
			{% if instance.left_extension %}{% render_plugin instance.left_extension %}{% endif %}
		</div>
		<div class="col-12 col-md-6 border-top">
			<div class="row py-2 lead">
				<div class="col-6 text-right text-nowrap">
					{% trans "Subtotal" context "cart" %}
				</div>
				<div class="col-4 col-md-6 text-right text-nowrap" djng-bind-if="cart.subtotal">
					{{ cart.subtotal }}
				</div>
			</div>
	{% for extra_row in cart.extra_rows %}
			<div class="row py-2" ng-if="!cart">
				<div class="col-6 text-right text-nowrap">{{ extra_row.label }}</div>
				<div class="col-4 col-md-6 text-right text-nowrap">{{ extra_row.amount }}</div>
			</div>
	{% endfor %}
			<div class="row py-2" ng-cloak ng-if="cart" ng-repeat="extra_row in cart.extra_rows">
				<div class="col-6 text-right text-nowrap" ng-bind="extra_row.label"></div>
				<div class="col-4 col-md-6 text-right text-nowrap" ng-bind="extra_row.amount"></div>
			</div>
			<div class="row py-2 shop-double-border lead font-weight-bold">
				<div class="col-6 text-right text-nowrap">{% trans "Total" context "cart" %}</div>
				<div class="col-4 col-md-6 text-right text-nowrap" djng-bind-if="cart.total">
					{{ cart.total }}
				</div>
			</div>
			{% if instance.right_extension %}{% render_plugin instance.right_extension %}{% endif %}
		</div>
	</div>
{% endblock shop-cart-foot %}
</div>
